<template>
    <JdHeader title="首页">
        <template #left>
            <van-icon name="bars" :size="30" @click="HandlerCategory" />
        </template>
        <template #title>
            <van-search @focus="inSearchHandler" shape="round" background="#c72418" placeholder="请输入搜索关键词" />
        </template>
        <template #right>
            <van-icon name="manager-o" v-if="isLogin" :size="30" />
            <router-link v-else to="./login">登录</router-link>
        </template>
    </JdHeader>

    <!-- 轮播图 -->
    <JdHomeBanner />

    <!-- 分类导航列表组件 -->
    <JdHomeNavList />

    <!-- 首页秒杀热门 -->
    <JdHomeHot />

    <!-- 商品列表 -->
    <JdHomeGoodsList />
</template>

<script setup lang="ts">
// 导入组件使用
import JdHomeBanner from './components/JdHomeBanner.vue'

// 导航
import JdHomeNavList from './components/JdHomeNavList.vue'

// 首页热门秒杀列表
import JdHomeHot from './components/JdHomeHot.vue';
// 商品列表
import JdHomeGoodsList from './components/JdHomeGoodsList.vue';

import { useRouter, type Router } from 'vue-router'
import { ref, onMounted } from 'vue'

import { getUserInfoApi } from '@/api/users'

// 拿到编程式导航路由的控制器
const $router: Router = useRouter()

// 点击左上角图标去到商品分类页
const HandlerCategory = () => {
    $router.push('/cate')
    console.log($router);

}


// 点击搜索进入到search 路由
const inSearchHandler = () => {
    console.log($router);

    // 进行跳转路由
    $router.push('/search')
}
// 登录按钮应该显示什么？
// 如果你登录过,我应该显示昵称
// 如果你没登录过,显示登录按钮

// 准备一个变量表示是否登录过
const isLogin = ref<boolean>(false)
// 准备一个变量表示用户名
const avatar = ref<string>('') || '新用户'

// 1.验证token
const testToken = async () => {
    // 1.从localStorage内拿到token和user_id
    // 如果没有,说明没有登录过
    const token = window.localStorage.getItem('token')
    const user_id = window.localStorage.getItem('user_id')
    if (!token || !user_id) {
        isLogin.value = false
        return
    }
    // 如果有,说明你曾经登录过(不能保证是否过期,不能保证是否被伪造)
    // 根据id 和token去请求用户详情信息
    const res = await getUserInfoApi(user_id)
    console.log(res);

    // 判断结果
    // 10019
    // 表示登录成功
    if (((res as unknown) as { code: string }).code === '10019') {

        isLogin.value = false
        return
    }
    // 表示登录过
    isLogin.value = true
    avatar.value = res.data[0].avatar

}
onMounted(() => {
    testToken()
})

</script>
<style scoped lang="scss">
@import '@/styles/variable.scss';

.cate-icon {
    font-size: 24px;
    color: #fff;
}
</style>